<template>
  <delay :timeout="10/1000">
    <div class="home-swiper">
      <cube-slide
        :data="home.swiper"
        :speed="800"
        :interval="interval"
        class="swiper"
      >
        <cube-slide-item
          v-for="(item, index) in home.swiper"
          :key="index"
          @click.native="handleClick(item)"
          class="item"
        >
          <img v-lazy="item.image.thumbnail_path" v-if="item.image && item.image.thumbnail_path" />
        </cube-slide-item>
      </cube-slide>
    </div>
  </delay>
</template>

<script>
import Delay from '@/components/Delay'
export default {
  props: ['home'],
  components: {
    Delay
  },
  data() {
    return {
      interval: 3000
    }
  },
  methods: {
    handleClick(item) {
      const url = item.url
      if (url.length > 0) {
        this.$router.push(url)
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.home-swiper
  height 155px
  //padding 0 10px 10px 10px
  //background #fbfbfb
  border-radius 10px
  margin 10px 10px 0 10px
  .swiper
    border-radius 10px
    .item
      //display flex
      //align-items center
      img
        width 100%
        height 100%

</style>
